﻿<!DOCTYPE html>
<html>
<head>
    <title>TreeView - Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treeview.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeViewService", function($scope, $timeout, $treeService){
				$scope.treeName = "treeSample";
				$scope.data = [];

				var flatList = [
					{ "id": "1", "text": "Dairy", "isExpanded": false, checked: true },
					{ "id": "11", "pid": "1", "text": "Milk" },
					{ "id": "12", "pid": "1", "text": "Butter" },
					{ "id": "13", "pid": "1", "text": "Cheese", checked: true },
					{ "id": "14", "pid": "1", "text": "Yogurt" },
					{ "id": "2", "text": "Fruits" },
					{ "id": "21", "pid": "2", "text": "Berries", "isExpanded": false },
					{ "id": "211", "pid": "21", "text": "BlackBerries" },
					{ "id": "212", "pid": "21", "text": "CranBerries" },
					{ "id": "213", "pid": "21", "text": "StrawBerries" },
					{ "id": "22", "pid": "2", "text": "Pits", checked: true },
					{ "id": "23", "pid": "2", "text": "Core", checked: true },
					{ "id": "24", "pid": "2", "text": "Citrus Fruits", "isExpanded": false },
					{ "id": "241", "pid": "24", "text": "Oranges" },
					{ "id": "242", "pid": "24", "text": "Lemons" },
					{ "id": "25", "pid": "2", "text": "Melons", checked: true },
					{ "id": "26", "pid": "2", "text": "Tropical Fruits" },
					{ "id": "261", "pid": "26", "text": "Avocados" },
					{ "id": "262", "pid": "26", "text": "Bananas", checked: true },
					{ "id": "263", "pid": "26", "text": "Dates", checked: true },
					{ "id": "3", "text": "Grains" },
					{ "id": "4", "text": "Meat", checked: true },
					{ "id": "41", "pid": "4", "text": "Beef" },
					{ "id": "42", "pid": "4", "text": "Lamb", "isExpanded": false, checked: true },
					{ "id": "421", "pid": "42", "text": "Lamb Breast" },
					{ "id": "422", "pid": "42", "text": "Lamb Leg", checked: true },
					{ "id": "423", "pid": "42", "text": "Lamb Ribs", checked: true },
					{ "id": "43", "pid": "4", "text": "Pork" },
					{ "id": "5", "text": "Sweets" },
					{ "id": "6", "text": "Vegetables", checked: true },
					{ "id": "7", "text": "Water"}
				]
				
				$scope.dataFields = {
					id : 'id',
					pid : 'pid',
					text : 'text',
					expanded: 'isExpanded'
				}

				var initTimer = $timeout(function(){
					$treeService.loadData($scope.treeName, flatList, null, $scope.dataFields);

					$timeout.cancel(initTimer);
				}, 1);

				
				$scope.eventLog = [];
				
				$scope.onAfterCollapse = function(e){
					$scope.eventLog.unshift({ name: "aftercollapse", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onAfterExpand = function(e){
					$scope.eventLog.unshift({ name: "afterexpand", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onAfterSelect = function(e){
					$scope.eventLog.unshift({ name: "afterselect", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onBeforeCollapse = function(e){
					$scope.eventLog.unshift({ name: "beforecollapse", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onBeforeExpand = function(e){
					$scope.eventLog.unshift({ name: "beforeexpand", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onBeforeSelect = function(e){
					$scope.eventLog.unshift({ name: "beforeselect", info: " event was fired for item: " + e.item.text }); 
				}
				
				$scope.onDragEnter = function(e){
					$scope.eventLog.unshift({ name: "dragenter", info: " event was fired when item is dragged into TreeView space" }); 
				}
				
				$scope.onDragLeave = function(e){
					$scope.eventLog.unshift({ name: "dragleave", info: " event was fired when dragged item leaves TreeView space" }); 
				}
				
				$scope.onDragOver = function(e){
					$scope.eventLog.unshift({ name: "dragover", info: " event was fired when item is dragged over TreeView space" }); 
				}
				
				$scope.onDragDrop = function(e){
					$scope.eventLog.unshift({ name: "dragdrop", info: " event was fired when drag-drop operation is completed" }); 
				}
				
				$scope.onKeyDown = function(e){
					$scope.eventLog.unshift({ name: "keydown", info: " event was fired when key with code " +  e.event.keyCode + " is pressed down" });
					$scope.$apply(); 
				}
				
				$scope.onKeyPress = function(e){
					$scope.eventLog.unshift({ name: "keypress", info: " event was fired when key with code " +  e.event.keyCode + " is pressed" }); 
					$scope.$apply(); 
				}
				
				$scope.onKeyUp = function(e){
					$scope.eventLog.unshift({ name: "keyup", info: " event was fired when key with code " +  e.event.keyCode + " is released" }); 
					$scope.$apply(); 
				}
				
				$scope.onItemAdding = function(e){
					$scope.eventLog.unshift({ name: "itemadding", info: " event was fired before " + e.item.text + " is added" }); 
				}
				
				$scope.onItemAdded = function(e){
					$scope.eventLog.unshift({ name: "itemadded", info: " event was fired after " + e.item.text + " is added" }); 
				}

                $scope.onItemCheckedChanging = function(e){
                    $scope.eventLog.unshift({ name: "itemCheckedChanging", info: " event was fired before CheckBox value is changed, checked property value is: " + e.value }); 
                }
                
                $scope.onItemCheckedChanged = function(e){
                    $scope.eventLog.unshift({ name: "itemCheckedChanged", info: " event was fired after CheckBox value is changed, checked property value set to: " + e.value }); 
                }
				
				$scope.onItemRemoving = function(e){
					$scope.eventLog.unshift({ name: "itemremoving", info: " event was fired before " + e.item.text + " is removed" }); 
				}
				
				$scope.onItemRemoved = function(e){
					$scope.eventLog.unshift({ name: "itemremoved", info: " event was fired after " + e.item.text + " is removed" }); 
				}
				
				$scope.onItemClick = function(e){
					var itemText = "TreeView";
					if (e.item)
						itemText = e.item.text;
					
					$scope.eventLog.unshift({ name: "itemclick", info: " event was fired when " + itemText + " was clicked" }); 
					$scope.$apply();
				}
				
				$scope.onItemDblClick = function(e){
					var itemText = "TreeView";
					if (e.item)
						itemText = e.item.text;
					
					$scope.eventLog.unshift({ name: "itemdblclick", info: " event was fired when " + itemText + " was double-clicked" }); 
					$scope.$apply();
				}
				
				$scope.onItemHover = function(e){
					$scope.eventLog.unshift({ name: "itemhover", info: " event was fired when the mouse cursor hovers over " + e.item.text + " space" }); 
					$scope.$apply();
				}
				
				$scope.onItemRightClick = function(e){
					var itemText = "TreeView";
					if (e.item)
						itemText = e.item.text;
					
					$scope.eventLog.unshift({ name: "itemrightclick", info: " event was fired when " + itemText + " was clicked using right mouse button" }); 
					$scope.$apply();
				}
				
				$scope.onSelectionChanged = function(e){
					$scope.eventLog.unshift({ name: "selectionchanged", info: " event was fired when selection changes" }); 
				}
				
				$scope.onScrollPosChanged = function(e){
					$scope.eventLog.unshift({ name: "scrollposchanged", info: " event was fired when position of scrollbar has changed. Current scroll position is: { x: " + e.scrollPos.x + ", y: " + e.scrollPos.y + " }" }); 
					$scope.$apply();
				}
				
			    $scope.treeEvents = {
					afterCollapse: function(e){
						return $scope.onAfterCollapse(e);
					},
					afterExpand: function(e){
						return $scope.onAfterExpand(e);
					},
					afterSelect: function(e){
						return $scope.onAfterSelect(e);
					},
					beforeCollapse: function(e){
						return $scope.onBeforeCollapse(e);
					},
					beforeExpand: function(e){
						return $scope.onBeforeExpand(e);
					},
					beforeSelect: function(e){
						return $scope.onBeforeSelect(e);
					},
					dragEnter: function(e){
						return $scope.onDragEnter(e);
					},
					dragLeave: function(e){
						return $scope.onDragLeave(e);
					},
					dragOver: function(e){
						return $scope.onDragOver(e);
					},
					dragDrop: function(e){
						return $scope.onDragDrop(e);
					},
					itemCheckedChanging: function(e){
						return $scope.onItemCheckedChanging(e);
					},
					itemCheckedChanged: function(e){
						return $scope.onItemCheckedChanged(e);
					},
					itemClick: function(e){
						return $scope.onItemClick(e);
					},
					itemDblClick: function(e){
						return $scope.onItemDblClick(e);
					},
					itemHover: function(e){
						return $scope.onItemHover(e);
					},
					itemRightClick: function(e){
						return $scope.onItemRightClick(e);
					},
					keyDown: function(e){
						return $scope.onKeyDown(e);
					},
					keyPress: function(e){
						return $scope.onKeyPress(e);
					},
					keyUp: function(e){
						return $scope.onKeyUp(e);
					},
					selectionChanged: function(e){
						return $scope.onSelectionChanged(e);
					},
					scrollPosChanged: function(e){
						return $scope.onScrollPosChanged(e);
					}
			    }

				$scope.clearEventLog = function(){
					$scope.eventLog.length = 0;
				}
			}]);
    </script>
    <style type="text/css">
	    .iui-checkbox-box
	    {
	        border: 0;
	        width: 16px;
	        height: 16px;
	    }
	    .iui-checkbox-checked
	    {
	        background-image: url("../../../resources/checkbox/checkbox-checked-4.png");
	    }
	    .iui-checkbox-unchecked
	    {
	        background-image: url("../../../resources/checkbox/checkbox-unchecked-4.png");
	    }
    </style>
</head>
<body oncontextmenu="return false;">
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">TreeView / Events</h2>
	        <div class="feature-content" style="width:750px">
                <iui-treeview name="{{treeName}}" class="directive" items="data" show-check-boxes="true" allow-drag="true" events="treeEvents"></iui-treeview>
                <div class="control-panel" style="width:300px;">
                    <div class="event-block">
						<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
						<p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        <ul class="event-log">
							<li ng-repeat="ev in eventLog"><span class="event-name">{{ev.name}}</span>{{ev.info}}</li>
						</ul>
                    </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents most of events that are fired from TreeView directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. Here is list of events that are supported:</p>
                     <ul class="feature-points">
                        <li><span style="color:#c60d0d">afterCollapse</span> - Occurs after an item is collapsed</li>
                        <li><span style="color:#c60d0d">afterEdit</span> - occurs after editing process ends</li>
                        <li><span style="color:#c60d0d">afterExpand</span> - Occurs after an item is expanded</li>
                        <li><span style="color:#c60d0d">afterSelect</span> - Occurs after an item is selected</li>
                        <li><span style="color:#c60d0d">beforeCollapse</span> - Occurs before an item is collapsed</li>
                        <li><span style="color:#c60d0d">beforeEdit</span> - occurs before editing process starts</li>
                        <li><span style="color:#c60d0d">beforeExpand</span> - Occurs before an item is expanded</li>
                        <li><span style="color:#c60d0d">beforeSelect</span> - Occurs before an item is selected</li>
                        <li><span style="color:#c60d0d">dragEnter</span> - Occurs when item is dragged into TreeView space</li>
                        <li><span style="color:#c60d0d">dragLeave</span> - Occurs when dragged item leaves TreeView space</li>
                        <li><span style="color:#c60d0d">dragOver</span> - Occurs when item is dragged over TreeView space</li>
                        <li><span style="color:#c60d0d">dragDrop</span> - Occurs when drag-drop operation is completed</li>
                        <li><span style="color:#c60d0d">gotFocus</span> - Occurs when item receives the input focus</li>
                        <li><span style="color:#c60d0d">keyDown</span> - Occurs when key is pressed down for the first time</li>
                        <li><span style="color:#c60d0d">keyPress</span> - Occurs when key is pressed</li>
                        <li><span style="color:#c60d0d">keyUp</span> - Occurs when key is released</li>
                        <li><span style="color:#c60d0d">itemCheckedChanging</span> - Occurs before checked property value is changed</li>
                        <li><span style="color:#c60d0d">itemCheckedChanged</span> - Occurs after checked property value is changed</li>
                        <li><span style="color:#c60d0d">itemCheckstateChanging</span> - Occurs before checkState property value is changed</li>
                        <li><span style="color:#c60d0d">itemCheckstateChanged</span> - Occurs after checkState property value is changed</li>
                        <li><span style="color:#c60d0d">itemClick</span> - Occurs when item is clicked</li>
                        <li><span style="color:#c60d0d">itemDblclick</span> - Occurs when item is double-clicked</li>
                        <li><span style="color:#c60d0d">itemHover</span> - Occurs when the mouse cursor hovers over an item space</li>
                        <li><span style="color:#c60d0d">itemRightclick</span> - Occurs when item is clicked using right mouse button</li>
                        <li><span style="color:#c60d0d">lostFocus</span> - Occurs when item loses the input focus</li>
                        <li><span style="color:#c60d0d">scrollposChanged</span> - Occurs when position of scrollbar has changed</li>
                        <li><span style="color:#c60d0d">selectionChanged</span> - Occurs when selection changes</li>
                    </ul>
                    <p><span class="initial-space"></span>Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.</p>
                    <p><span class="initial-space"></span>In this sample event log will not register add/remove events, because this kind of operation is not demonstrated here.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
